/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TextInput,
  Image,
  TouchableOpacity,
  Dimensions,
} from 'react-native';

var width = Dimensions.get('window').width;//得到屏幕宽度

export default class LoginScreen extends Component{
  
  constructor(props){
    super(props);
    this.state={
      userName:'',
      password:'',
    }
  }
   
  render() {
    return (
      <View style={styles.container}>
         <Image style={styles.style_image} 
          source={require('../image/workerbook/icon_workers_3.png')}/>

           <TextInput style={[styles.input,{marginTop:40}]}
              placeholder="请输入用户名"
              placeholderTextColor='#c4c6cc'
              value={this.state.userName}
              underlineColorAndroid={'transparent'}
              onChangeText={(text)=>this.setState({userName:text})}
           >
           </TextInput>
           <TextInput style={[styles.input,{marginTop:10}]}
              placeholder="请输入密码"
              placeholderTextColor='#c4c6cc'
              password={true}
              secureTextEntry={true}
              value={this.state.password}
              underlineColorAndroid={'transparent'}
              onChangeText={(text)=>this.setState({password:text})}
           >
           </TextInput>
           
           <TouchableOpacity
            activeOpacity={0.5}
            style={styles.style_button}
            onPress={()=>this.props.navigation.navigate('Tab')}
           >
           <Text style={{fontSize:16,color:'#ffffff'}}>登录</Text>
           </TouchableOpacity>
           <View style={{flexDirection:'row',justifyContent:'space-between',marginTop:8,
           paddingLeft:15,paddingRight:15}}>
               <TouchableOpacity onPress={()=>this.props.navigation.navigate('Forget')}>
               <Text color='#8d9199'>忘记密码</Text>
               </TouchableOpacity>
               <TouchableOpacity onPress={()=>this.props.navigation.navigate('Regist')}>
               <Text color='#8d9199'>手机注册</Text> 
               </TouchableOpacity>  
           </View>
           </View>
         
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection:'column',
    backgroundColor: '#ffffff',
  },
  style_image:{
     height:70,
     width:70,
     borderRadius:30,
     alignSelf:'center',
     marginTop:60
  },
  style_button:{
    marginLeft:15,
    marginRight:15,
    alignSelf:'center',
    justifyContent:'center',
    alignItems:'center',
    height:45,
    marginTop:40,
    backgroundColor:'#ff7733',
    width:width-30,
    borderRadius:10
  },
  input: {
    backgroundColor:'#f2f3f5',
    fontSize: 16,
    marginLeft:15,
    marginRight:15,
    paddingLeft:8,
    paddingRight:8,
    borderRadius:4
  },
  remark_style:{
    fontSize:14,
  }
});
